<template>
	<view>
		<!-- 背景图 -->
		<view class="title bg-gradual-blue"></view>
		<!-- 头像 -->
		<view class="avatar" :style="'padding-top:'+CustomBar+'px;'">
			<view class="head-img">
				<image :src="userinfo.headimgurl" class="round"></image>
			</view>
			<view class="head-main padding-left-sm" style="padding: 15rpx;">
				<view class="text-cut">
					<text class="text-xxl text-white text-bold">{{userinfo.nickname}}</text>
				</view>
				<view class="cu-tag sm radius text-white" style="background-color: rgba(255,255,255,0.2);">
					<text>未认证</text>
				</view>
			</view>
			<view class="head-footer padding-left-sm" style="padding: 15rpx;">
				<view></view>
				<view>
					<text class="cuIcon-comment text-white" style="font-size: 20px;"></text>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="main-order cu-list menu sm-border radius margin-top">
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-friend text-blue"></text>
					<text class="text-black">好友列表</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-text text-orange"></text>
					<text class="text-black">个人资料</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-settingsfill text-grey"></text>
					<text class="text-black">设置</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				CustomBar:Vue.prototype.CustomBar,
				userinfo:[]
			}
		},
		created() {
			this.userinfo = uni.getStorageSync('userInfo')
		},
		methods: {

		}
	}
</script>

<style>
	.cu-bar{
		min-height: 72rpx;
	}
	.title{
		position: fixed;
		display: flex;
		width: 100%;
		height: auto;
		min-height: 468rpx;
		z-index: 1;
		top: 0;
	}
	.avatar{
		position: relative;
		width: 92%;
		margin-left: 4%;
		height: auto;
		z-index: 2;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.head-img{
		width: 140rpx;
		height: 140rpx;
	}
	.head-img>image{
		width: 100%;
		height: 100%;
	}
	.head-main{
		width: 65%;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.head-footer{
		width: calc(35% - 140rpx);
		height: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	.main-order{
		position: relative;
		z-index: 2;
		width: 92%;
		margin-left: 4%;
	}
</style>
